<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../chromeos/network/network_icons.html">
<link rel="import" href="../../../cr_elements/hidden_style_css.html">
<link rel="import" href="../../../html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="onc_mojo.html">

<dom-module id="network-icon">
  <template>
    <style include="cr-hidden-style">
      :host {
        display: inline-flex;
        overflow: hidden;
        padding: 2px;
        position: relative;
      }

      #icon {
        background: var(--cros-icon-color-primary, rgba(0, 0, 0, 0.65));
        height: 20px;
        width: 20px;
      }

      /* Upper-left corner */
      #technology {
        --iron-icon-fill-color: var(--cros-icon-color-secondary);
        height: 20px;
        left: 0;
        position: absolute;
        top: 1px;
        width: 20px;
      }

      :host-context([dir='rtl']) #technology {
        left: auto;
        right: 4px;
      }

      /* Lower-right corner */
      #secure {
        --iron-icon-fill-color: var(--cros-icon-color-secondary);
        height: 8px;
        left: 16px;
        position: absolute;
        top: 16px;
        width: 8px;
      }

      :host-context([dir='rtl']) #secure {
        left: auto;
        right: 0;
      }

      /* Upper-left corner */
      #roaming {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/roaming_badge.svg);
        background-color: var(--cros-icon-color-secondary);
        height: 8px;
        left: 3px;
        position: absolute;
        top: 4px;
        width: 8px;
      }

      :host-context([dir='rtl']) #roaming {
        left: auto;
        right: 16px;
      }

      /* Images */
      #icon.ethernet {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/ethernet.svg);
      }

      #icon.vpn {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/vpn.svg);
      }

      /* Wi-Fi images */
      #icon.wifi-not-connected {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0_with_x.svg);
      }

      #icon.wifi-no-network,
      #icon.wifi-0 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
      }

      #icon.wifi-1 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
      }

      #icon.wifi-2 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
      }

      #icon.wifi-3 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
      }

      #icon.wifi-4 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
      }

      #icon.wifi-off {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_off.svg);
      }

      #icon.wifi-connecting {
        animation: wifi-levels 750ms infinite;
        animation-direction: alternate;
        animation-timing-function: steps(4, end);
      }

      @keyframes wifi-levels {
        0% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
        }
        25% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
        }
        50% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
        }
        75% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
        }
        100% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
        }
      }

      /* Cellular images */
      #icon.cellular-not-connected {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0_with_x.svg);
      }

      #icon.cellular-no-network,
      #icon.cellular-0 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
      }

      #icon.cellular-1 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
      }

      #icon.cellular-2 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
      }

      #icon.cellular-3 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
      }

      #icon.cellular-4 {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
      }

      #icon.cellular-off {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_off.svg);
      }

      #icon.cellular-locked {
        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_locked.svg);
      }

      #icon.cellular-connecting {
        animation: cellular-levels 750ms infinite;
        animation-direction: alternate;
        animation-timing-function: steps(4, end);
      }

      @keyframes cellular-levels {
        0% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
        }
        25% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
        }
        50% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
        }
        75% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
        }
        100% {
          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
        }
      }
    </style>
    <template is="dom-if" if="[[showIcon_(networkState)]]" restamp>
      <div id="icon"
          class$="[[getIconClass_(networkState, deviceState, isListItem)]]">
      </div>
      <iron-icon id="technology"
          hidden="[[!showTechnology_(networkState, showTechnologyBadge)]]"
          icon="[[getTechnology_(networkState)]]">
      </iron-icon>
      <iron-icon id="secure" hidden="[[!showSecure_(networkState)]]"
          icon="network8:badge-secure">
      </iron-icon>
      <div id="roaming" hidden="[[!showRoaming_(networkState)]]"></div>
    </template>
  </template>
  <script src="network_icon.js"></script>
</dom-module>
